<template>
  <div class="nav-bar">
    <!-- 左侧菜单图标 -->
    <van-icon name="apps-o" size="24" class="menu-icon" />

    <!-- 中间搜索框 -->
    <van-search v-model="searchValue" placeholder="螃蟹" shape="round" class="search-box" />

    <!-- 右侧功能图标 -->
    <div class="right-icons">
      <van-icon name="notes-o" size="24" class="icon" />
      <van-icon name="bulb-o" size="24" class="icon" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 搜索框的绑定值
const searchValue = ref('')
</script>

<style scoped>
.nav-bar {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 4px 10px;
  /* background-color: #fff; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.menu-icon {
  margin-right: 16px;
}

.search-box {
  flex: 1;
  margin: 0 16px;
}

.right-icons {
  display: flex;
  align-items: center;
}

.icon {
  margin-left: 16px;
}
</style>
